<template>
  <el-dialog
    width="800"
    :title="dialogTitle + '打卡活动'"
    v-model="visible"
    draggable
    class="dialog"
    @close="closeDialog"
  >
    <el-form v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="奖品名称" prop="rewardName">
        <el-input
          v-model.trim="queryParams.rewardName"
          placeholder="请输入活动名称"
          @keyup.enter="handleSearch(true)"
        />
      </el-form-item>
      <el-form-item label="类型" prop="rewardType">
        <el-select v-model="queryParams.rewardType" placeholder="请选择" clearable>
          <el-option label="全部状态" value=""></el-option>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="累计打卡" align="center" prop="rules">
        <template #default="{ row }">
          <span>{{ row?.rules ?? 0 }}单 </span>
        </template>
      </el-table-column>
      <el-table-column label="奖品名称" align="center" prop="rewardName">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleSkipCouponPage(row)">
            {{ row?.rewardName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="奖品类型" align="center" prop="cityName">
        <template #default="{ row }">
          <span>{{ statusOptions.find((i) => i.value === row?.rewardType)?.label }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发放数量" align="center" prop="grantQuantity" />
      <el-table-column label="剩余库存" align="center" prop="residualInventory" />
    </el-table>

    <div style="margin-right: 50px; position: relative">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import { getRewardApi } from '@/api/marketing/punchCard'

const queryRef = ref()
const tableList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const visible = ref(false)
const dialogTitle = ref('')
const queryParams = ref({
  activitySignInsId: null,
  rewardName: null,
  rewardType: '',
  pageNum: 1,
  pageSize: 10,
  cityName: null
})
// [1优惠券、2礼包、3实体商品]
const statusOptions = ref([
  { value: 1, label: '优惠券' },
  { value: 2, label: '礼包' },
  { value: 3, label: '实体商品' }
])

function handleSearch(type) {
  if (type) {
    // 搜索
    queryParams.value.pageNum = 1
    getList()
  } else {
    // 重置
    queryRef.value.resetFields()
    handleSearch(true)
  }
}
function getList() {
  loading.value = true
  getRewardApi(queryParams.value)
    .then((res) => {
      tableList.value = res?.data?.rows ?? []
      total.value = res?.data?.total ?? 0
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
const router = useRouter()
function handleSkip(path, query) {
  router.push({ path, query })
}
/**跳转到优惠券页面 */
function handleSkipCouponPage(row) {
  console.log('跳转到优惠券页面', row)
  const query = {
    id: row.rewardId,
    couponName: row?.rewardName,
    cityName: row.cityName
  }
  switch (row.rewardType) {
    case 1:
      handleSkip('/market/activity', query)
      break
    case 2:
      handleSkip('/market/giftPack', {
        id: row.rewardId,
        packName: row?.rewardName,
        cityName: row.cityName
      })
      break
    case 3:
      handleSkip('/market/physicalGoods', query)
      break
  }
}
function init(row, cityName) {
  dialogTitle.value = row.name
  queryParams.value.activitySignInsId = row.id
  queryParams.value.cityName = cityName
  visible.value = true
  getList()
}
function closeDialog() {
  queryRef.value.resetFields()
  visible.value = false
}

defineExpose({
  init
})
</script>
<style lang="scss" scoped></style>
